// 登录组件
<template>
  <div class="loginWarp">
    <div class="login-container">
      <div class="login_title">
        {{ loginArr.login }}
        <span class="login_close" @click="closeBtn"
          ><img src="@/assets/imgs/header_close.png"
        /></span>
      </div>
      <div class="login_item">
        <el-input
          v-model="loginForm.account"
          class="inp"
          size="large"
          clearable
          :placeholder="$t('vr.emailphone')"
        ></el-input>
      </div>
      <div class="login_item">
        <el-input
          type="password"
          autocomplete="new-password"
          v-model="loginForm.password"
          :placeholder="$t('vr.password')"
          class="inp"
          size="large"
          clearable
          show-password
        ></el-input>
      </div>
      <div class="login_item_switch">
        <el-switch
          v-model="rememberOn"
          active-color="#ff4949"
          @change="rememberMeChange"
        ></el-switch>
        <span>{{ $t("vr.rememberme") }}</span>
      </div>
      <div class="login_item">
        <el-button
          type="danger"
          size="large"
          class="loginBtn"
          :disabled="disabled"
          :loading="btnLoading"
          @click="handleSubmit"
          >{{ $t("vr.login") }}</el-button
        >
        <!-- // @keypress.native.enter="handleSubmit" -->
      </div>
      <div class="login_row">
        {{ $t("vr.noaccount") }}
        <span @click="register">{{ $t("vr.registerRow") }}</span>
      </div>
      <div @click="forgetFun" class="forget">
        <a>{{ $t("vr.forgetpass") }}</a>
      </div>
    </div>
  </div>
</template>
<script>
import { mapState, mapMutations } from "vuex";
import api from "servicePath/index";
import md5 from "md5";
export default {
  data() {
    return {
      btnLoading: false,
      loginForm: {
        account: "", //用户名
        password: "" // 密码
      },
      rememberOn: false,
      accountKey: "userAccount",
      passwordKey: "userPassword",
      rememberKey: "isRememberMe"
    };
  },
  computed: {
    // 获取语言
    ...mapState(["lang"]),
    // 根据语言修改名称
    loginArr() {
      const arr = {
        login: this.$t("vr.login")
      };
      return arr || {};
    },
    // 按钮是否禁用
    disabled() {
      return !(this.loginForm.account && this.loginForm.password);
    }
  },
  mounted() {
    console.log("mounted");
    var isRemember = localStorage.getItem(this.rememberKey);
    if (isRemember == 1) {
      var account = localStorage.getItem(this.accountKey);
      var password = localStorage.getItem(this.passwordKey);
      this.loginForm.account = account;
      this.loginForm.password = password;
      this.rememberOn = true;
    } else {
      this.rememberOn = false;
    }
  },
  methods: {
    ...mapMutations([
      "isShowLogin",
      "changeVrToken",
      "changeHeaderToken",
      "saveloginInfo"
    ]), // 修改vuex中的登录数据
    async handleSubmit() {
      if (this.rememberOn == 1) {
        console.log("记住账号密码");
        localStorage.setItem(this.accountKey, this.loginForm.account);
        localStorage.setItem(this.passwordKey, this.loginForm.password);
        localStorage.setItem(this.rememberKey, 1);
      } else {
        console.log("清除账号密码");
        localStorage.removeItem(this.accountKey);
        localStorage.removeItem(this.passwordKey);
        localStorage.removeItem(this.rememberKey);
      }

      const params = {
        account: this.loginForm.account,
        password: md5(this.loginForm.password)
      };
      this.btnLoading = true;
      console.log(this.loginArr);
      try {
        const res = await api.getLogin(params);
        console.log(res);
        this.btnLoading = false;
        // 存入token
        this.changeVrToken(res.data.token);
        // 设置上传头部token
        this.changeHeaderToken(res.data.token);
        const roles = res.data.roles;
        // 登录成功
        this.$message({
          message:
            this.lang == "en"
              ? "Login successful"
              : this.lang == "de"
              ? "Anmelden erfolgreich"
              : "登录成功",
          type: "success"
        });
        this.isShowLogin(""); // 隐藏登录
        this.saveloginInfo(res.data); //存用户信息
        sessionStorage.setItem("loginInfo", JSON.stringify(res.data)); // 存数据
      } catch (err) {
        this.btnLoading = false;
      }
    },
    register() {
      this.isShowLogin(""); //隐藏登录
      this.$emit("register");
    },
    forgetFun() {
      this.isShowLogin(""); //隐藏登录
      this.$emit("forgetFun");
    },
    closeBtn() {
      // 关闭登录框
      this.isShowLogin(""); //隐藏登录
    },
    rememberMeChange(value) {
      console.log("isRememberMe", value);
      this.rememberOn = value;
    }
  }
};
</script>
<style lang="scss" scoped>
.loginWarp {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 40px;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 5000;
}
.login-container {
  width: 400px;
  background: #fff;
  border-radius: 5px;
  box-sizing: border-box;
  padding: 20px 30px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin-top: -40px;
  .login_title {
    font-size: 30px;
    font-weight: bold;
    padding-bottom: 20px;
    position: relative;
    .login_close {
      position: absolute;
      right: 0px;
      top: 0px;
      color: #000;
      display: block;
      width: 25px;
      height: 25px;
      cursor: pointer;
      img {
        display: block;
        width: 100%;
        height: 100%;
      }
    }
  }
  .login_item {
    margin-bottom: 20px;
    .loginBtn {
      margin-top: 20px;
      width: 100%;
      font-size: 16px;
      background: linear-gradient(to right, #ff7f41, #e6007e);
    }
  }
  .login_item_switch {
    span {
      font-size: 12px;
      color: #d8d8d8;
      margin-left: 15px;
    }
  }
  .login_row {
    text-align: center;
    font-size: 12px;
    color: #d8d8d8;
    span {
      color: #ff4949;
      cursor: pointer;
    }
  }
  .forget {
    text-align: center;
    padding-top: 20px;
    a {
      font-size: 12px;
      color: #d8d8d8;
    }
  }
}
</style>
